<template>
  <div class="business_report_agent agent" v-loading="loading">
    <div class="top">
      <div class="search">
        <div class="contition">
          <div class="wrap_time">
            <date-time type="other" :query="query" @isFold="isShowFold"></date-time>
            <el-button type="primary" class="primary_btn fr find" @click.stop="search">{{
              $t('public.search2')
            }}</el-button>
            <div class="clear"></div>
          </div>
          <div class="wrap_drop">
            <unfold :isShow="isFold" :title="[]">
              <template slot="unfoldSlot">
                <div class="skill">
                  <m7Select
                    class="el-select"
                    filterable
                    multiple
                    :placeholder="'请选择工单类型'"
                    :options="businessTypesList"
                    v-model="businessTypes"
                  ></m7Select>
                  <m7Select
                    class="el-select"
                    filterable
                    multiple
                    :placeholder="$t('report.queueNaSea')"
                    :options="mailQueues"
                    @input="changeQueue"
                    v-model="currentQueue"
                  ></m7Select>
                  <m7Select
                    class="el-select"
                    filterable
                    multiple
                    :placeholder="'请选择座席'"
                    :options="selectedAgentList"
                    v-model="agents"
                  ></m7Select>
                  <m7Select
                    class="el-select"
                    filterable
                    multiple
                    :placeholder="'请选择工单创建方式'"
                    :options="businessSources"
                    v-model="sources"
                  ></m7Select>
                </div>
              </template>
            </unfold>
          </div>
          <el-collapse accordion>
            <el-collapse-item>
              <template slot="title">
                <span class="fl explain">{{ $t('report.toggleInstructe') }}</span>
              </template>
              <div>
                <span class="tip"
                  >在工单满意度统计中，只会统计开启了整体满意度的数据，如果需要对满意度进行统计的话，请在工单满意度设置中开启整体满意度</span
                ><br />
                1，邀评数：发送工单满意度评价的工单数量 <br />
                2，参评数：客户参与工单满意度评价的数量 <br />
                3，参评率：客户参与满意度评价数在邀评数中的占比 <br />
                4，未评数：客户未参加工单满意度评价的数量 <br />
                5，未评率：客户未参加工单满意度评价数量在邀评数中的占比 <br />
                6，五星评价数/率：整体满意度中评价五星的数量/评价五星的数量在参评数量中的占比 <br />
                7，四星评价数/率：整体满意度中评价四星的数量/评价四星的数量在参评数量中的占比<br />
                8，三星评价数/率：整体满意度中评价三星的数量/评价三星的数量在参评数量中的占比<br />
                9，二星评价数/率：整体满意度中评价二星的数量/评价二星的数量在参评数量中的占比<br />
                10，一星评价数/率：整体满意度中评价一星的数量/评价一星的数量在参评数量中的占比
              </div>
            </el-collapse-item>
          </el-collapse>
        </div>
      </div>
      <div class="report-cards">
        <div class="card card-first">
          <div class="card-title">邀评数</div>
          <div class="card-number">{{reportData.allInviteCount}}</div>
          <div class="card-content">
            <div class="card-content--left">
              <div>参评数：<div>{{reportData.allAppraiseCount}}</div></div>
              <div>未评数：<div>{{reportData.allNotAppraiseCount}}</div></div>
            </div>
            <div class="card-content--right">
              <div>参评率：<div>{{reportData.allAppraiseRate}}</div></div>
              <div>未评率：<div>{{reportData.allNotAppraiseRate}}</div></div>
            </div>
          </div>
        </div>
        <div class="card">
          <div class="card-title">五星评价数</div>
          <div class="card-number">{{reportData.star5Count}}</div>
          <div class="card-content">五星率：{{reportData.star5Rate}}</div>
        </div>
        <div class="card">
          <div class="card-title">四星评价数</div>
          <div class="card-number">{{reportData.star4Count}}</div>
          <div class="card-content">四星率：{{reportData.star4Rate}}</div>
        </div>
        <div class="card">
          <div class="card-title">三星评价数</div>
          <div class="card-number">{{reportData.star3Count}}</div>
          <div class="card-content">三星率：{{reportData.star3Rate}}</div>
        </div>
        <div class="card">
          <div class="card-title">二星评价数</div>
          <div class="card-number">{{reportData.star2Count}}</div>
          <div class="card-content">二星率：{{reportData.star2Rate}}</div>
        </div>
        <div class="card">
          <div class="card-title">一星评价数</div>
          <div class="card-number">{{reportData.star1Count}}</div>
          <div class="card-content">一星率：{{reportData.star1Rate}}</div>
        </div>
      </div>
    </div>
    <div :id="id">
      <el-row class="ichars">
        <highcharts :options="highchartsOptions"></highcharts>
        <div class="notes">
          <span class="light">{{ $t('report.hicharsNotes') }}: <span></span>{{ $t('report.hicharsLight') }}</span>
          <span class="dark"><span></span>{{ $t('report.hicharsDark') }}</span>
        </div>
      </el-row>
    </div>
  </div>
</template>
<script>
import affix from '../../../ui-modules/affix/Affix.vue'
import unfold from '../../../ui-modules/unfold/index.vue'
import dateTime from '../base/datetime.vue'
import { deepClone, optionTimeTypeCheck } from '@/utils/m7Utils.js'
import { checkTime, colorConfigArr } from '@/utils/reportUtils.js'
export default {
  name: 'BusinessReportSatisfaction',
  data() {
    return {
      reportData: {
        allAppraiseCount: 0,
        allAppraiseRate: "0%",
        allInviteCount: 0,
        allNotAppraiseCount: 0,
        allNotAppraiseRate: "0%",
        appraiseCount: 0,
        inviteCount: 1,
        star0Count: 0,
        star1Count: 0,
        star1Rate: "0%",
        star2Count: 0,
        star2Rate: "0%",
        star3Count: 0,
        star3Rate: "0%",
        star4Count: 0,
        star4Rate: "0%",
        star5Count: 0,
        star5Rate: "0%"
      },
      businessSources: [
        { label: this.$t('business.sessionCreate'), value: 'webchat' },
        { label: this.$t('business.callsCreate'), value: 'call' },
        { label: this.$t('business.businessCreation'), value: 'business' },
        { label: this.$t('business.interfaceCreate'), value: 'interface' },
        { label: this.$t('business.customerCreate'), value: 'customer' },
        { label: this.$t('business.mailCreate'), value: 'email' }
      ],
      sources: [],
      agents: [],
      currentQueue: [], // 当前工单技能组
      businessTypes: [],
      mailQueues: [], // 技能组信息集合
      isFold: false, // 是否展示搜索条件
      id: 'business_report_satisfaction', // 查询传的id
      loading: false,
      query: {}, // 查询条件
      isShow: false, // 配置表头开关
      selectedAgentList: [], // 座席选择绑定的值
      agentOptions: [], // 座席缓存的信息里面有名字加工号还有座席id
      starList: [0,0,0,0,0],
      highchartsDefaultOptions: {
        chart: { type: 'column', animation: false },
        colors: colorConfigArr,
        title: '',
        xAxis: {
          categories: ['五星', '四星', '三星', '二星', '一星'],
          title: {
            enabled: true,
            text: '',
            style: { fontWeight: 'normal' }
          }
        },
        yAxis: {
          gridLineColor: '#e6e6e6',
          allowDecimals: false,
          title: { text: '' },
          showEmpty: false
        },
        legend: { align: 'center', verticalAlign: 'top', y: 30 },
        tooltip: {
          pointFormat:
            '<span style="color:{point.color}">\u25CF</span> {series.name}: <b>{point.y}{point.valueSuffix}</b><br/>',
          shared: true
        },
        credits: { enabled: false },
        series: []
      }
    }
  },
  components: {
    affix,
    unfold,
    dateTime
  },
  computed: {
    businessTypesList() {
      return this.$store.state.business.transCache.businessTypes
    },
    highchartsOptions() {
      let options = deepClone(this.highchartsDefaultOptions)
      options.series = [
        {
          data: this.starList,
          name: '评星数',
          valueName: 'a'
        }
      ]
      return options
    }
  },
  methods: {
    changeQueue(val) {
      this.agents = []
      let agentIds = []
      console.log('changeQueue')
      this.currentQueue = val
      if (this.currentQueue.length) {
        this.currentQueue.map((id) => {
          for (let i = 0; i < this.mailQueues.length; i++) {
            if (this.mailQueues[i].value === id) {
              agentIds = agentIds.concat(
                this.mailQueues[i].EmailAssignMembers.map((agent) => ({
                  label: this.getAgentName(agent.agentID),
                  value: agent.agentID
                }))
              )
              break
            }
          }
        })
      } else {
        agentIds = this.agentOptions
      }
      this.selectedAgentList = [...agentIds]
    },
    isShowFold(bool) {
      this.isFold = bool
    },
    getAgentName(id) {
      let agent = this.$store.getters.agents[id]
      let getAgent = agent ? agent.displayName + '(' + agent.exten + ')' : ''
      return getAgent
    },
    getSearchQueryData() {
      let data = {
        account: this.$store.state.session.user.account,
        query: { agent: this.currentQueue.length && !this.agents.length ? this.selectedAgentList.map(item => { return item.value}) : this.agents, source: this.sources, flow: this.businessTypes }
      }
      let query = deepClone(this.query)
      if (query.timeType === 'other') {
        // 校验类型与时间
        let message = checkTime(query.StartTime, query.EndTime, false, true)
        if (message !== true) {
          this.$message.error(this.$t(message))
          return
        }
        let StartTimeStr = query.StartTime.replace(/-/g, '')
        query.StartTime = StartTimeStr
        let EndTimeStr = query.EndTime.replace(/-/g, '')
        query.EndTime = EndTimeStr
      }
      data.query = Object.assign({}, data.query, query)
      return data
    },
    search() {
      var data = this.getSearchQueryData()
      if (!data) {
        return
      }
      this.loading = true
      console.log(data)
      this.$store.dispatch('queryBusinessAppraiseReport', data).then((res) => {
        if (!res.success) {
          this.loading = false
          return
        }
        this.reportData = res.data
        console.log(res)
        this.starList = [res.data.star5Count || 0, res.data.star4Count || 0, res.data.star3Count || 0, res.data.star2Count || 0, res.data.star1Count || 0]
        this.loading = false
      })
    }
  },
  beforeMount() {
    this.$store.dispatch('getDicCache', { type: 'mailQueues' }).then((res) => {
      if (res && res.success) {
        this.mailQueues = res.data.map((item) => {
          return {
            EmailAssignMembers: item.EmailAssignMembers,
            label: item.DisplayName,
            value: item._id
          }
        })
      }
    })
    Promise.all([this.$store.dispatch('getCache', { type: 'businessFlowField' })]).then(() => {
      getBusinessFlow(this.$store)
    })
    this.$store.dispatch('getCache', { type: 'agents' }).then((agents) => {
      this.agentOptions = agents.map((agent) => ({
        label: `${agent.displayName}[${agent.exten}]`,
        value: agent._id,
        deptId: agent.deptId ? agent.deptId : ''
      }))
      this.selectedAgentList = deepClone(this.agentOptions)
      this.search()
    })
  }
}
function getBusinessFlow(store) {
  return store.dispatch('getBusinessFlow')
}
</script>
<style lang="stylus" scoped>
@import '../../../../assets/common.styl'
/deep/.el-collapse {
  border-top: none;
  border-bottom: none;
  margin-top: 24px;
  .el-collapse-item__header {
    padding-left: 0px
  }
}
.contition {
  margin: 0px 0 24px 0;
  padding-left: 0px
}
.tip {
  color $c-main
}
.report-cards {
  display: flex;
  justify-content: space-between;
  .card {
    flex: 1
    margin-left: 16px;
    border: 1px solid #e9e9e9;
    text-align: center;
    background-color: #f8f8f9;
    color: #595959;
    border-radius: 4px;
    .card-title {
      margin-top: 10px;
      font-weight: 400;
      font-size: 12px;
      line-height: 20px;
      color: #000;
    }
    .card-number {
      font-weight: 400;
      font-size: 24px;
      line-height: 20px;
      text-align: center;
      color: #459AE9;
      margin-top: 8px;
      margin-bottom: 10px;
    }
    .card-content {
      display: flex;
      justify-content: center;
      border-top: 1px solid #d9d9d9;
      margin: 0px 16px;
      padding-top: 10px;
      padding-bottom: 10px;
      font-size: 12px;
      line-height: 20px;
      .card-content--left {
        margin-right: 12px
      }
    }
  }
  .card-first {
    margin-left: 0px;
    box-sizing: border-box;
    background-color: #F8F8F9;
    color: #595959;
    border-radius: 4px;
  }
}
.business_report_agent
  padding-bottom: 24px
  .search
    .wrap_conti
        margin 14px 0 0 0px
        .ski
          margin-right 26px
        .chan_ag
          float left
          margin-right 20px
        .el-radio
          margin-right 30px
        .dept
          .el-radio
            margin-right 42px
    .el-checkbox
      margin-left 16px
  .tab
    margin-bottom 20px
    .deploy
      .tip
        margin-left 40px
      .item
        cursor pointer
        &:hover
          color $c-main
  .top
    padding: 40px 30px 0 40px;
    .sear
      margin-left 0
    .skill
      margin-top 16px
      .el-select
        margin-right: 24px
        width 200px
      .ski
        margin-right 16px
        display inline-block
        width 42px
  .deploy
    .tex
      margin-left 10px
  .el-col-1
    height 36px
    line-height 36px
</style>
